<template>
  <div>
    <!-- <div class="folder">
        <div class="top"></div>
        <div class="bottom"></div>
      </div> -->
    <el-autocomplete
      ref="autocomplete"
      placeholder="请输入内容"
      v-model="searchInput"
      class="input_search"
      v-scrollLoad="querySearchLoad"
      :fetch-suggestions="querySearch"
      @select="handleSelectSearch"
    >
      <!-- 使用 v-slot 绑定插槽内容 -->
      <!-- <template #prefix>
        <el-icon><Search /></el-icon>
      </template> -->

      <template #default="{ item }">
        <div class="content_box">
          <div class="searchInput_name">
            <svg-icon :icon-class="selectSvgIcons(item)" style="font-size: 20px; vertical-align: middle; margin-right: 6px"></svg-icon>
            <div>{{ item.realName }}{{ item.suffix ? `.${item.suffix}` : '' }}</div>
          </div>
          <div v-if="item.docContent" class="search_docContent" v-html="esSearchFunc(item.docContent)"></div>
          <div class="superiorsPath">
            <span>路径:{{ item.superiorsPath }}</span>
          </div>
        </div>
      </template>
    </el-autocomplete>

    <div class="page_tags">
      <el-tag class="tagclass" v-for="(item, index) in DefaultWordList" :key="index" @click="tagLabelClick(item)">{{ item }}</el-tag>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps({
  rowData: {
    type: Object,
    default: () =>{}
  }
})
import { apiSearchFilesInfo } from '@/api/enterpriseDoc/enterpriseDoorApi';
import {apiEsConfigGet,apiOssSearchInfo} from  "@/api/enterpriseDoc/enterpriseDocApi"
import { defineProps, onMounted, ref, reactive } from 'vue';
import { ApiPerGetParentTreeNodeAll } from '@/api/personDoc/personDocApi';
const searchInput = ref('');
// const DefaultWordList = reactive(['总结', '报告', '计划', '提案', '合同', '数据']);
const searchStr = ref({
  page: 0,
  pageCount: '',
  list: []
});
// es搜索出来的内容高亮方法
const esSearchFunc = (str: any) => {
  return str.replace(new RegExp(searchInput.value, 'gi'), `<span style="color:red;">${searchInput.value}</span>`);
};

// 点击标签
const tagLabelClick = (v: any) => {
  console.log(v);
};

// 滚动加载
const querySearchLoad = () => {
  console.log(333);
};

//icon图标
const selectSvgIcons = (v: any) => {
  return proxy.$yuUtils.selectSvgIcon(v);
};

//数据源
const querySearch = async (queryString: string, cb: (arg: any) => void) => {
  if (searchInput.value == '' && searchInput.value != undefined) {
    cb([]);
    // this.$refs.autocomplete.activated = false
    return;
  }
  let isEs = false;
  // 首先调用查询es的接口
  await apiEsConfigGet().then((res: any) => {
    isEs = res.data;
  })
  if(isEs){
    searchStr.value.page = 0;
    apiOssSearchInfo({
      moduleType: 'enterprise',
      content: searchInput.value,
      teamId: props.rowData.id,
      title: searchInput.value
    }).then((res:any)=> {
      if (res.length == 0) {
        ElMessage.warning('未匹配到数据,请重新输入!')
        cb([]);
        return;
      }
      res.map(item =>{
        item.realName = item.title
        item.suffix = item.fileSuffix
        item.docContent = item.content
        item.superiorsPath = '----',
        item.id = item.moduleId
      })
      cb(res)
    })
  }else{
    searchStr.value.page = 0;
    apiSearchFilesInfo({
      page: searchStr.value.page,
      size: 10,
      type: 'enterprise',
      fileName: searchInput.value,
      libraryId: props.rowData.id,
      
    }).then((res: any) => {
      searchStr.value.page += 1;
      searchStr.value.pageCount = res.data.pageCount;
      searchStr.value.list = res.data.rows;
      if (res.data.rows.length == 0) {
        ElMessage.warning('未匹配到数据,请重新输入!')
      }
      // 调用 callback 返回建议列表的数据
      cb(res.data.rows);
    });
  }
 
};

//单击搜索
const handleSelectSearch = async (row: any) => {
  let params = {
    id: row.id,
    fileType: 2
  };
  let res = await ApiPerGetParentTreeNodeAll(params);
  if (res.code == 200) {
    let expandedKeys = res.data.map((item: any) => {
      let obj = {
        id: parseInt(item.id),
        label: item.realName
      };
      return obj;
    });
    sessionStorage.setItem('expandedKeys', JSON.stringify(expandedKeys));
    proxy.$router.push({ path: '/newUi/enterprises/enterpriseDoc' });
  }
};

onMounted(() => {
  // 访问 pageType
  console.log('传递的值:', props.pageType);
});
</script>

<style scoped lang="scss">
:deep(.input_search) {
  width: 100%;
}

:deep(.el-input__wrapper) {
  padding: 0px;
}

:deep(.el-input__inner:hover),
:deep(.el-input__inner:focus) {
  border: 2px solid #4a9dec;
  box-shadow: 0px 0px 0px 7px rgb(74, 157, 236, 20%);
  background-color: white;
}

:deep(.el-input__prefix) {
  top: 2px;
}

:deep(.el-input-group__prepend) {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: #3d9cfb;
  border-color: #3d9cfb;
  color: #ffffff;
}

:deep(.el-input__inner) {
  // padding-top: 8px;
  // padding-bottom: 8px;
  // line-height: 40px;
  // height: 40px;
  // // border-radius: 16px;
  // border-top-right-radius: 20px;
  // border-bottom-right-radius: 20px;
  border: 2px solid transparent;
  outline: none;
  overflow: hidden;
  background-color: #ffffff;
  border-radius: 10px;
  transition: all 0.5s;
  // border: 2px solid #4a9dec;
  box-shadow: 0 0.4rem #dfd9d9;
  padding-left: 8px;
}

.searchInput_name {
  width: 100%;
  display: flex;
  align-items: center;

  div {
    // width: 10px;
    overflow: hidden;
    /*内容超出后隐藏*/
    text-overflow: ellipsis;
    /*超出内容显示为省略号*/
    white-space: nowrap;
    /*文本不进行换行*/
  }
}

.content_box {
  border-bottom: 1px solid #efefef;
}

.search_docContent {
  font-size: 12px;
  color: #939292;
  line-height: 22px;
  max-width:590px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.superiorsPath {
  font-size: 12px;
  color: #d6d6d6;
  line-height: 22px;
  text-align: right;
  overflow: hidden;
  /*内容超出后隐藏*/
  text-overflow: ellipsis;
  /*超出内容显示为省略号*/
  white-space: nowrap;
  /*文本不进行换行*/
}

.folder {
  position: relative;
  animation: float 1.8s infinite ease-in-out;
  transition: transform 0.3s ease;
  margin-bottom: 6px;
}

.folder:hover {
  transform: scale(1.05);
}

.folder .top {
  background: linear-gradient(135deg, #ff9a56, #ff6f56);
  width: 60px;
  height: 15px;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
}

.folder .bottom {
  background: linear-gradient(135deg, #ffe563, #ffc663);
  width: 100px;
  height: 70px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  border-radius: 0 10px 10px 10px;
  position: relative;
  top: -10px;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-12px);
  }

  100% {
    transform: translateY(0px);
  }
}

.page_tags {
  margin-top: 15px;

  .tagclass {
    margin-right: 10px;
    cursor: pointer;
  }
}
</style>
